import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface PieProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: object;
    legend?: object;
    radius?: string | string[];
    padAngle?: number;
    itemStyle?: object;
    label?: object;
    emphasis?: object;
    seriesData?: { value: number; name: string }[];
}

@customElement('lit-pie')
export class LitPie extends LitElement {
    @property({type: String}) chartId: string = 'lit-pie-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = {};
    @property({type: Object}) legend: any = {};
    @property({type: String}) radius: string = '50%';
    @property({type: Number}) padAngle: number = 0;
    @property({type: Object}) itemStyle: any = {};
    @property({type: Object}) label: any = {};
    @property({type: Object}) emphasis: any = {
        itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    };
    @property({type: Array}) seriesData: { value: number; name: string }[] = [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'}
    ];

    option: echarts.EChartsOption = {
        title: this.title,
        tooltip: {
            trigger: 'item'
        },
        legend: this.legend,
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: this.radius,
                data: this.seriesData,
                label: this.label,
                emphasis: this.emphasis,
            }
        ]
    };

    static styles = style;

    updated() {
        this.option.title = this.title;
        this.option.legend = this.legend;
        (this.option.series as any)[0].radius = this.radius;
        (this.option.series as any)[0].padAngle = this.padAngle;
        (this.option.series as any)[0].itemStyle = this.itemStyle;
        (this.option.series as any)[0].label = this.label;
        (this.option.series as any)[0].emphasis = this.emphasis;
        (this.option.series as any)[0].data = this.seriesData;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-pie': LitPie;
    }
}